<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #body {
            margin: 50px auto;
            width: 960px;
            display: flex;
        }

        #body > div {
            border: #7b7c80 solid 1px;
        }

        #leftDiv {
            text-align: center;
            padding-top: 20px;
        }

        #leftDiv > div {
            display: flex;
            width: 480px;
            font-size: 14px;
        }

        #leftDiv_title {
            text-align: right;
            width: 15%;
            height: 210px;
            padding-top: 30px;
        }

        #leftDiv_center {
            text-align: left;
            width: 40%;
            height: 210px;
            padding-top: 30px;
            padding-left: 15px;
        }

        #leftDiv_title > p {
            margin: 20px 0;
        }

        #leftDiv_center > p {
            margin: 20px 0;
        }


        #bookImg {
            width: 180px;
            height: 240px;
        }

        .Btn {
            width: 60px;
            height: 25px;
            margin: 30px 0;
            font-weight: bold;
        }

        #search_input {
            width: 150px;
            height: 23px;
        }

        #rightDiv {
            width: 400px;
            height: 345px;
            text-align: center;
            position: relative;
            overflow: scroll;
        }

        #rightDiv > h4 {
            margin: 10px 0;
        }

        table {
            text-align: center;
            /*height: 300px;*/


        }


        #showTable th {
            width: 25%;
            height: 20px;
        }

        #showTable td {
            width: 25%;
            height: 40px;
            border-top: #7b7c80 solid 1px;
            font-size: 14px;
        }

        #data tr td img {
            width: 30px;
            height: 38px;
        }

        #shopDiv {
            position: absolute;
            top: 1px;
            left: 1px;
            background-color: rgba(226, 239, 218, 0.3);
            display: none;
        }

        #shopDiv > div {
            width: 960px;
            margin: 0 auto;
            background-color: #e7e6e6;
        }

        #shopDiv > div > div {
            width: 960px;
            border: #b0def5 solid 1px;
            margin: 50px auto 10px;
        }

        #shopTable {
            width: 100%;
            text-align: center;
        }

        #shopTable th, #shopTable td {
            width: 20%;
            height: 25px;
        }
    </style>
    <script src="index.js"></script>
</head>
<body>
<div id="body">
    <div id="leftDiv">
        <div>
            <div id="leftDiv_title">
                <p>图书名：</p>
                <p>作 者：</p>
                <p>类 型：</p>
                <p>售价：</p>
            </div>
            <div id="leftDiv_center"></div>
            <div id="bookImg"></div>
        </div>
        <input type="button" value="购买" class="Btn" style="margin-right: 30px" id="buyBtn" onclick="showShopDiv()">

        <input type="text" id="search_input" placeholder="请输入书名/类别">
        <input type="button" value="查询" class="Btn" onclick="searchBook()">
    </div>
    <div id="rightDiv">
        <h4>图书一览</h4>
        <table id="showTable" width="100%" cellspacing="0">
            <thead>
            <tr>
                <th></th>
                <th>书名</th>
                <th>作者</th>
                <th>售价</th>
            </tr>
            </thead>
            <tbody id="data"></tbody>
        </table>
    </div>
</div>
<div id="shopDiv">
    <div>
        <div style="height: 400px;overflow: scroll">
            <table border="1" cellspacing="0" id="shopTable">
                <thead>
                <tr>
                    <th>书名</th>
                    <th>单价</th>
                    <th>购买数量</th>
                    <th>单项总价</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="shopData"></tbody>
            </table>
        </div>
        <div style="align-items:center;display: flex;width: 850px;padding:0 50px;justify-content: space-between;height: 50px;">
            <div><span>总价为：</span><span id="totalPriceSpan"></span></div>
            <input type="button" value="继续购物" class="Btn" onclick="continueBuy()">
        </div>
    </div>
</div>
</body>
</html>